<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script type="text/javascript" src="../../lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="../../lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="../../lib/vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player" style="height: 100%"></div>
      <div class="control">
        <div class="top">
          <div>日照分析</div>
        </div>

        <div class="params">
          <div class="title">时间设置</div>
          <div class="item">
            <div class="label">日期选择</div>
            <div class="content">
              <input type="number" v-model="time.year" :min="0" :min="1980" :max="2080" style="width: 60px" />
              -
              <input type="number" v-model="time.month" :min="1" :max="12" style="width: 30px" />
              -
              <input type="number" v-model="time.day" :min="1" :max="31" style="width: 30px" />
            </div>
          </div>
          <div class="item">
            <div class="label">时间区间</div>
            <div class="content">
              <input type="number" v-model="time.minM" :min="0" :max="time.maxM" style="width: 30px" />
              :
              <input type="number" v-model="time.minS" :min="0" :max="time.minM === time.maxM ? time.maxS : 60" style="width: 30px" />
              -
              <input type="number" v-model="time.maxM" :min="time.minM" :max="24" style="width: 30px" />
              :
              <input type="number" v-model="time.maxS" :min="time.minM === time.maxM ? time.minS : 0" :max="60" style="width: 30px" />
            </div>
          </div>

          <div class="title">参数设置</div>
          <div class="item">
            <div class="label">高度</div>
            <div class="content">
              <input type="number" v-model="pamras.height" style="width: 180px" :min="0" />
              m
            </div>
          </div>
          <div class="item">
            <div class="label">采样间距</div>
            <div class="content">
              <input type="number" v-model="pamras.spacing" style="width: 180px" />
              m
            </div>
          </div>
          <div class="item">
            <div class="label">底面高度</div>
            <div class="content">
              <input type="number" v-model="pamras.groundElevation" style="width: 180px" />
              m
            </div>
          </div>
          <div class="item">
            <div class="label">日照效果球半径</div>
            <div class="content">
              <input type="number" v-model="pamras.sphereRadius" style="width: 180px" :min="0" />
              m
            </div>
          </div>
          <div class="button-box">
            <button @click="start()">开始日照分析</button>
          </div>

          <div class="button-box">
            <button @click="stop()" class="sunlight stop">停止日照分析</button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      const { createApp, reactive, ref, watch } = Vue

      const vueComposition = {
        setup() {
          // 日照分析 代码块
          const pamras = reactive({
            spacing: 30, //间距，取值范围：[任意负数~任意正数]，默认值：-1米
            groundElevation: 128, //底面高度，取值范围：[任意负数~任意正数]，默认值：0米
            height: 200, //高度，取值范围：[0~任意正数]，默认值：5000米
            sphereRadius: 3 //日照效果球半径，取值范围：[0~任意正数]
          })

          // 获取当前的时间
          const nowDate = new Date()
          nowDate.getYear() //获取当前年份(2位)
          nowDate.getFullYear() //获取完整的年份(4位,1970-????)
          nowDate.getMonth() //获取当前月份(0-11,0代表1月)

          // 时间范围输入
          const time = reactive({
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            day: nowDate.getDate(),
            minM: 8,
            minS: '00',
            maxM: 16,
            maxS: '00'
          })

          // 分析状态，true为正在分析，false则没有进行分析
          let analysisState = false

          // 开始日照分析
          const start = () => {
            // 设置分析状态为 true
            analysisState = true
            let options = {
              year: time.year, //年，取值范围：[1970~至今年份]，默认值：当前日期
              month: time.month, //月，取值范围：[1~12]，默认值：当前日期
              day: time.day, //日，取值范围：[1~31]，默认值：当前日期
              startTime: time.minM + ':' + time.minS, //开始时间，默认值：08:00
              endTime: time.maxM + ':' + time.maxS, //结束时间，默认值：16:00
              spacing: pamras.spacing, //间距，取值范围：[任意负数~任意正数]，默认值：-1米
              groundElevation: pamras.groundElevation, //底面高度，取值范围：[任意负数~任意正数]，默认值：0米
              height: pamras.height, //高度，取值范围：[0~任意正数]，默认值：5000米
              sphereRadius: pamras.sphereRadius //日照效果球半径，取值范围：[0~任意正数]
            }

            __g.tools.startSunshineAnalysis(options)
          }
          // 停止日照分析
          const stop = () => {
            analysisState = false
            __g.tools.stopSunshineAnalysis()
          }

          // 防抖
          const debounce = (func, wait) => {
            let timeout = null
            return function () {
              if (analysisState) {
                clearTimeout(timeout)
                timeout = setTimeout(() => {
                  func()
                }, wait)
              }
            }
          }
          watch(pamras, debounce(start, 500), { deep: true })
          watch(time, debounce(start, 500), { deep: true })

          return {
            time,
            pamras,
            start,
            stop
          }
        }
      }

      const app = createApp(vueComposition).mount('#app')

      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, { domId: 'player' })
      }

      //自适应分辨率
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      window.addEventListener('load', OnLoad, true)
      window.addEventListener('resize', onResize, true)

      //页面离开事件(离开时清除此页面的操作及重置场景)
      window.onunload = function (e) {
        __g.tools.stopSunshineAnalysis()
        // 重置场景
        __g.reset()
      }
    </script>
  </body>
</html>
